* {
  /* 初始化 清除页面内外边距 */
  padding: 0;
  margin:0
}

.hamburger_menu{
  /* 宽度占浏览器的可视区域的100% */
  width: 100%;
  height: 48px;
  background-color: #000;
}

.hamburger_menu #toggle {
  /* 复选框隐藏 */
  display: none;
}

.hamburger_menu label{
  /* 行内元素 label 转为块级元素，不然无法设置宽高 */
  display: block;
  width: 48px;
  height: 48px;

  /* 鼠标移入边小手 */
  cursor: pointer;
}

.hamburger_menu label .hamburger_container{
  /* 相对定位，按照本身的位置移动 不影响父盒子 */
  position: relative;
  top: 17px;
  left:14px;
  width: 20px;
  height: 20px;
}

.hamburger_menu label .hamburger_container span {
  /* 两个重叠在一起 */
  position: relative;
  top:0;
  display: block;
  height: 1px;
  background-color: rgb(168, 168, 168);
  /* 设置取消选中的过渡时间 */
  transition: transform 0.2s ease-in-out top 0.2s ease-in-out;
}

/* 设置第二条线 */
.hamburger_menu label .hamburger_container span:nth-child(2){
  top: 5px;
}

/* 设置转换 */
/*  + 是相邻兄弟选择器 找相邻的label */
.hamburger_menu #toggle:checked + label .hamburger_container span:nth-child(1){
  top:5px;
  /* 顺时针旋转45度 */
  transform: rotate(45deg);
  /* 设置过渡时间 */
  transition: top 0.2s ease-in-out, transform 0.2s ease-in-out 0.2s;
}

/* 选中后的第二条线 */
.hamburger_menu #toggle:checked + label .hamburger_container span:nth-child(2){
  top: 5px;
  /* 逆时针旋转45度 */
  transform: rotate(-45deg);
  transition: top 0.2s ease-in-out, transform 0.2s ease-in-out 0.2s;
}

.hamburger_menu ul {
  width: 100vm;
  /* 让高度占浏览器可视区域的100% 减去 导航栏的48px */
  height: calc(100vh - 48px);
  /* 内边距 */
  padding: 0 30px;
  background-color: #000;
  /* 下拉菜单的转换 */
  transform: scaleY(0);
  /* 设置过渡时间 */
  transition: all 0.4s ease-in-out;
  /* 设置缩放中心点 */
  transform-origin: 50% 0;
  /* 设置透明度 */
  opacity: 0;
}

.hamburger_menu ul li {
  /* 取消原点 */
  list-style: none;
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-size: 18px;
}

/* 给前三条li设置下边框 */
.hamburger_menu ul li:not(li:last-child){
  border-bottom: 1px solid rgb(73, 73, 73);
}

/* 选中复选框放大到原有高度 */
.hamburger_menu #toggle:checked ~ ul {
  transform: scaleY(1);
  opacity: 1;
}
